<div class='card vb-table' :class='cls'>
	<div class="card-header" v-if='title' v-html="title">
	</div>
	<div class="card-body">
		<div class='table-responsive' :class='{"vb-table-nowrap" : nowrap}'>
			<table class="table" :class='{"table-striped" : striped,"table-bordered" : border}'>
				<thead>
					<tr>
						<th v-for="el in columns" class='vb-table-th' :style="{width:el.width + 'px'}" @click='sort(el)'
							:class="[el.align ? ('text-' + el.align) : '']">
							<div class='text-nowrap text-center' v-if="el.checkbox">
								<label>
									<span v-html='el.title'></span><br>
									<input type='checkbox' class='vb-table-th-checkbox' v-model="isCheckAll" :disabled="disabled">
								</label>
							</div>
							<div class='text-nowrap' v-else>
								<span v-html='el.title'></span>
								<span class='pull-right' v-if='el.sort' v-show='el.sortOrder'>
									<i :class="['bi-chevron-' + el.sortOrder]"></i>
								</span>
							</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,rowIndex) in rows" class="vb-table-tr" :class="{'vb-table-tr-selected':item._selected,'vb-table-tr-parent' : item._parent}" 
						:style="[rowStyler(item,rowIndex) || '']" @click='toggleSelect(item,$event,rowIndex)' 
						v-show='!item.children || item.children.length === 0 || item._show'>
						<td v-if='item.children && item.children.length > 0' :colspan="columns.length">
							<vb-table :pagination='false' :init-front-page-data='item.children' :columns='columns' :title='item.title' 
								:striped='false' :subTable='true'></vb-table>
						</td>
						<td v-if='!item.children || item.children.length === 0' v-for="(el,colIndex) in columns" :style='{width : el.width + "px"}' 
							:title="showColumnTitle ? el.title : ''" :class="[el.checkbox ? 'vb-table-checkbox' : '',el.align ? ('text-' + el.align) : '']" 
							@click="clickTd(item,$event,rowIndex,colIndex)">
							<label v-if='el.checkbox' class='vb-table-checkbox-label'>
								<input type='checkbox' v-model="item._selected" :disabled="disabled">
							</label>
							<div v-else-if='item._parent && colIndex === 0' class='vb-table-ch-head'>
								<i :class="['bi-chevron-' + (rows[rowIndex + 1]._show ? 'down' : 'right')]"></i>
								<span class='ms-1'>{{item[el.field]}}</span>
							</div>
							<div v-else-if='el.template' :style='el.style'>
								<slot :name='el.field' :column="el" :row="item"></slot>
							</div>
							<div v-else v-html="dealValue(item,el,rowIndex)" :style='el.style'></div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<h2 v-show='!rows || total === 0 || rows.length === 0' class="text-muted text-center">暂无数据</h2>
	</div>
	<div v-if='pagination' class='vb-pagination clearfix'>
		<div class='float-start' onselectstart='return false'>
			<button class='btn btn-sm btn-outline-secondary vb-pagination-first' type='button' :disabled="curPage <= 1" @click="toPage($event,'first')">
				<i class='bi-chevron-double-left'></i>
			</button>
			<button class='btn btn-sm btn-outline-secondary ms-1' type='button' :disabled="curPage <= 1" @click='toPage($event,-1)'>
				<i class='bi-chevron-left'></i>
			</button>
			<input class='form-control form-control-sm page ms-1' placeholder='页数' v-model.number='changeCurPage' @keydown.enter='toThePage'>
			<span class='ms-1'>共{{sumPage}}页</span>
			<button class='btn btn-sm btn-outline-secondary ms-1' type='button' :disabled="curPage >= sumPage" @click='toPage($event,1)'>
				<i class='bi-chevron-right'></i>
			</button>
			<button class='btn btn-sm btn-outline-secondary vb-pagination-last ms-1' type='button' :disabled="curPage >= sumPage" @click="toPage($event,'last')">
				<i class='bi-chevron-double-right'></i>
			</button>
		</div>
		<div class='float-end'>
			<span>当前第{{curPage}}页,{{start}}~{{end}}条,共{{total}}条</span>
			<select class='form-select form-select-sm d-inline-block w-auto' v-model='pageSize'>
				<option v-for='el in pageSizeArr' :value='el'>{{el}}</option>
			</select>
		</div>
	</div>
	<vb-spinner ref='spinner'></vb-spinner>
</div>